Bootstrap Snippet scroll slider using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="slidesContainer">
        <div id="slide01" data-slide="s1" class="slide slide01 active">
            <div class="bcg"></div>
            <div class="slideContent">
                <h1>Slide 1 Title</h1>
                <p>This is a short description.</p>
            </div>
        </div>
        <div id="slide02" data-slide="s2" class="slide slide02">
            <div class="bcg"></div>
            <div class="slideContent">
                <h1>Slide 2 Title</h1>
                <p>This is a short description.</p>
            </div>
        </div>
        <div id="slide03" data-slide="s3" class="slide slide03">
            <div class="bcg"></div>
            <div class="slideContent">
                <h1>Slide 3 Title</h1>
                <p>This is a short description.</p>
            </div>
        </div>
        <div id="slide04" data-slide="s0" class="slide slide04">
            <div class="bcg"></div>
            <div class="slideContent">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        body {
            font: 16px/1.5 'Open Sans', Helvetica, Helvetica Neue, Arial, sans-serif;
            background-color: #2e2e30;
            color: #fff;
          }
          
          h1,
          h2,
          h3,
          h4 {
            font-weight: 700;
          }
          
          .slidesContainer {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            overflow: hidden;
          }
          
          .slideContent {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
          }
          
          .slideContent h1 {
            font-size: 24px;
            margin-bottom: 5px;
            line-height: 1em;
          }
          
          .slideContent p {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"scroll slider "
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"scroll slider " Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"scroll slider "
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY